<?php
if (session_id() == '') session_start();
$docroot = rtrim(getenv('DOCUMENT_ROOT'),'/');
require_once($docroot.'/lib/wapi/wapi.php');
?>
<!DOCTYPE HTML>
<html>
    <head>
		<title>SpawnUs</title>
        <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <!-- Status Bar -->
        	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<!-- App Startup Image -->
			<link rel="apple-touch-startup-image" href="app_startup.jpg" />
		<!-- App Icon -->
			<link rel="apple-touch-icon" href="app_icon.png" />
        <!-- Fav Icon -->
        	<link rel="icon" type="image/png" href="app_icon.png">
		<!-- jQuery -->
			<script type="application/x-javascript" src="/lib/jquery/jquery-1.5.1.min.js"></script>
		<!-- jQuery jPlayer -->
			<script type="application/x-javascript" src="/lib/jplayer/jquery.jplayer.min.js"></script>
		<!-- jQuery UI -->
			<link type="text/css" href="/lib/jquery-ui/themes/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
			<script type="text/javascript" src="/lib/jquery-ui/jquery-ui-1.8.2.custom.min.js"></script>
        <!-- jQuery Corners -->
        	<script type="application/x-javascript" src="/lib/jquery-corners/jquery-corners-2.1.js"></script>
        <!-- jQuery Touchwipe -->
        	<script type="application/x-javascript" src="/lib/jquery.touchwipe/jquery.touchwipe.js"></script>
        <!-- jQuery Touch Object -->
        	<script type="application/x-javascript" src="/lib/wapp/touchobject.js"></script>
		<!-- JSON 	-->
			<script src="/lib/json2.js"></script>
		<!-- WAPP -->
			<script type="application/x-javascript" src="/lib/wapp/wapp.js"></script>
			<style type="text/css" media="screen">@import url("/lib/wapp/wapp.css");</style>
		<!-- Apps -->
    </head>
    <body>

<!-- Status Bar -->
	<div id="status_bar">
        <div id="home_link">
        	<img src="app_icon.png" id="home_link_icon"></img>
			<div class="user_name_display"> . . . </div>
		</div>
		<div id="wapp_switcher"></div>
		<div id="wapp_status_tray"></div>
	</div>

<!-- Wapp Desktop -->
	<div id="wapp_desktop">
		<img id="wapp_desktop_img" src="/lib/images/wall_paper/green_grass.jpg"></img>


<!-- Page Shadow (for modal/dialog) -->
	<div id="page_shadow"></div>

<!-- Wapp Image Preloader -->
	<div id="wapp_image_preloader"></div>

<!-- Wapp Audio -->
	<div id="wapp_audio"></div>

<!-- Wapp Panel -->
	<div id="wapp_panel" title="Wapp Panel" class="wapp_dialog">
		<div class="wapp_dialog_main"></div>
	</div>

<!-- Wapp Menu -->
	<div id="wapp_menu" title="Wapp Menu" class="wapp_dialog">
		<div class="wapp_dialog_main"></div>
	</div>

<!-- Login Screen -->
	<div id="login" title="Login" class="wapp_dialog">
		<form name="login" action="">
			<div class="row login_item">
				<label>User Name</label>
				<input type="text" id="loginName" value=""/>
			</div>
			<div class="row login_item">
				<label>Password</label>
				<input type="password" style="" id="loginPass" value=""/>
			</div>
			<div class="crow" id="login_status_label" style="text-align:center; border-bottom:0;">
				Please login.
			</div>
			<div class="crow login_item" style="text-align:center;border-bottom:0;height: 40px;">
				<input type="submit" value="Login" class="button" />
			</div>
			<div class="crow logout_item" style="text-align:center;border-bottom:0;height: 40px;">
				<button style="width:120px;" onclick="wapp.logout()">Logout</button>
			</div>
		</form>
	</div>

<!-- Wapp Settings -->
    <form id="settings" title="Settings" class="wapp_dialog">
		<h2>Offline Cache</h2>
		<fieldset>
            <div class="row">
                <label>Cache</label>
                <div id="offline_cache_toggle" class="toggle" onclick="wapp.cache.toggle()" toggled="false"><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
            </div>
			<div class="crow">
				<label>Files</label>
				<span id="cache_file_cnt"></span>
			</div>
			<div class="crow">
				<label>Total Size</label>
				<span id="cache_total_size"></span>
			</div>
			<div class="crow">
				<label>Last Update</label>
				<span id="cache_last_update"></span>
			</div>
			<div class="crow" style="border-bottom:0;height: 45px;">
				<div class="cache_update_progress ui-progressbar"></div>
			</div>
			<div class="crow" style="text-align:center;border-bottom:0; display:none;">
				<button style="width:120px;" onclick="wapp.cache.clear();">Clear Cache</button>
				<button style="width:120px;" onclick="wapp.cache.refresh();">Refresh Cache</button>
				<button style="width:120px;" onclick="wapp.cache.update();">Update</button>
				<button style="width:120px;" onclick="wapp.cache.swap();">Swap Cache</button>
				<button style="width:120px;" onclick="wapp.restartApp();">Restart App</button>
			</div>
		</fieldset>
        <h2>Preferences</h2>
        <fieldset>
            <div class="row">
                <label>Local</label>
                <div class="toggle" onclick=""><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
            </div>
            <div class="row">
                <label>Other</label>
                <div class="toggle" onclick="" toggled="true"><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
            </div>
        </fieldset>

        <h2>Map Settings</h2>
        <fieldset>
            <div class="row">
                <label>Geolocation</label>
                <div id="enable_geolocation" class="toggle" onclick="" toggled="true"><span class="thumb"></span><span class="toggleOn">ON</span><span class="toggleOff">OFF</span></div>
            </div>
        </fieldset>

        <h2>User</h2>
        <fieldset>
            <div class="row">
                <label>Name</label>
                <input type="text" name="userName" value=""/>
            </div>
            <div class="row">
                <label>Password</label>
                <input type="password" name="password" value=""/>
            </div>
            <div class="row">
                <label>Confirm</label>
                <input type="password" name="password" value=""/>
            </div>
        </fieldset>
        <fieldset>
			<div class="crow" style="text-align:center;">
				<button style="width:120px;" onclick="runner.load_settings(); return false;">Load</button>
				<button style="width:120px;" onclick="runner.save_settings(); return false;">Save</button>
				<button style="width:120px;" onclick="runner.reset_settings(); return false;">Reset</button>
			</div>
		</fieldset>
    </form>

<!-- Apps -->
</div>
<!-- End Wapp Desktop -->

<!-- Window Template -->
	<div class="window_template app_window">
		<div class="app_window_header">
			<div class="window_state_button app_window_close_button"></div>
			<div class="window_state_button app_window_max_button"></div>
			<div class="window_state_button app_window_min_button"></div>
			<div class="app_window_title"></div>
		</div>
		<div class="app_window_view"></div>
	</div>

    </body>
</html>